<template>
<view class="container" v-if="workInfo">
		<u-navbar title-size="34" :title="workInfo.name" back-icon-color="#292940"  title-color="#292940" :border-bottom="false" :custom-back="goBack" placeholder></u-navbar>
		<view v-if="workInfo.type == 1">
			<view class="blind-img" @click="lookImg">
				<image :src="workInfo.file" mode="widthFix"></image>
				<view class="back-img">
					<image class="bg-image" src="../../../static/home/earth-icon.png" mode="widthFix"></image>
					<view class="title">POSTRINGS+</view>
				</view>
			</view>
			<view class="base"></view>
		</view>
		<view class="audio-box" :style="{background:`url(${workInfo.cover}) no-repeat`,'--percent':maxWidth + 'px'}" v-else-if="workInfo.type == 2">
			<view class="backdrop-box">
				<view class="audio-bg" :style="animationState">
					<image class="audio-pic" :src="workInfo.cover" mode="aspectFill"></image>
				</view>
				<image class="audio-img" :src="$playImg" v-if="!isPlaying" @click="palyAudio"></image>
				<image class="audio-img" :src="$playingImg" v-else @click="pauseAudio"></image>
				<view class="play-icon" :class="{'isRotate':isPlaying}"></view>
				<view class="d-flex justify-content-between progress-box align-items-center">
					<view class="progress-time text-right text-888888 fz-24">{{audioPlayTime}}</view>
					<view class="progress-wrap position-relative">
						<view class="progress-left position-absolute" :style="{width: progress +'%' }"> </view>
						<view class="progress-l position-absolute" :style="{left: progress +'%' }"></view>
					</view>
					<view class="progress-time text-right text-888888 fz-24">{{audioTime}}</view>
				</view>
			</view>
		</view>
		<view class="video-box" v-else :style="{'--percent':maxWidth + 'px'}">
			<!-- #ifdef APP-PLUS -->
			<view class="myPic" :style="{background: `url(${workInfo.cover}) no-repeat`}" v-show="!videoShow">
				<view class="maskPic">
					<image src="/static/market/paly-video.png" @click="videoShow = true"></image>
				</view>
			</view>
			<video class="myVideo" :poster="workInfo.cover" v-if="videoShow" autoplay object-fit="contain" :loop="true"
				:src="workInfo.file" :show-fullscreen-btn="false" controls></video>
			<u-mask :show="videoShow" @click="videoShow = false" style="background-color: rgba(0, 0, 0, 1);">
				<view class="warp">
					<image class="closeVideo" src="/static/market/close-circle.png" v-if="videoShow"></image>
				</view>
			</u-mask>
			<!-- #endif -->
			<!-- #ifdef H5 -->
			<video class="myVideo" :style="{'--percent':maxWidth + 'px'}" object-fit="contain" :src="workInfo.file" :loop="true"
				controls></video>
			<!-- #endif -->
		</view>
		<view class="content" :class="{'mt-3':workInfo.type != 1}">
			<view class="brief-box card-shadow">
				<view class="d-flex align-items-center">
					<image class="me-icon" src="/static/market/certification.png"></image>
					<view class="text-999BA8 fz-24">该作品拥有POSTRINGS数字藏品官方认证</view>
				</view>
				<view class="d-flex align-items-center fz-24 justify-content-between">
					<view class="lable">{{workInfo.category.name}}</view>
					<view class="d-flex flex-end flex-column text-right">
						
					</view>
				</view>
				<view class="text-292940 fz-36 font-weight-600">{{workInfo.name}}</view>
				<view class="mt-2">
					<text class="text-999BA8 fz-24 my-count mr-1">拥有</text>
					<text class="text-292940 fz-26 font-weight-500 mr-3">{{workInfo.hold_count || 0}}</text>
					<text class="text-999BA8 fz-24 my-count mr-1">寄售</text>
					<text class="text-292940 fz-26 font-weight-500">{{workInfo.sell_count || 0}}</text>
				</view>
			</view>
			<!-- 设置 -->
			<template v-if="workInfo.user_id == USER.id">
				<view class="input-info card-shadow" v-if="workInfo.buy_limit === 0">
					<view class="input-list d-flex justify-content-between fz-28 align-items-center">
						<view class="text-292940">藏品设置</view>
						<view class="d-flex justify-content-end align-items-center">
							<view class="text-343A40 family-cn">暂未设置</view>
							<!-- <view class="more-icon">
								<image src="/static/mine/me-more.png"></image>
							</view> -->
						</view>
					</view>
				</view>
				<view class="input-info card-shadow" v-else>
					<!-- <view class="input-list d-flex justify-content-between fz-28 align-items-center">
						<view class="text-292940 font-weight-600">藏品设置</view>
						<view class="d-flex justify-content-end align-items-center">
							<view class="text-292940 family-cn">修改</view>
							<view class="more-icon">
								<image src="/static/mine/me-more.png"></image>
							</view>
						</view>
					</view> -->
					<view class="input-list d-flex justify-content-between fz-28 align-items-center">
						<view class="text-292940">预售时间</view>
						<view class="text-292940 family-cn">{{workInfo.preorder_time}}</view>
					</view>
					<view class="input-list d-flex justify-content-between fz-28 align-items-center">
						<view class="text-292940">公售时间</view>
						<view class="text-292940 family-cn">{{workInfo.sell_time}}</view>
					</view>
					<view class="input-list d-flex justify-content-between fz-28 align-items-center">
						<view class="text-292940">二级市场开发时间</view>
						<view class="text-292940 family-cn">{{workInfo.open_market_time}}</view>
					</view>
					<view class="input-list d-flex justify-content-between fz-28 align-items-center">
						<view class="text-292940">限购数量</view>
						<view class="text-292940 family-cn">{{workInfo.buy_limit}}</view>
					</view>
				</view>
			</template>
			<view class="input-info card-shadow">
				<view class="input-list d-flex justify-content-between fz-28 align-items-center" @click="toAlbum">
					<view class="text-292940">专辑</view>
					<view class="d-flex justify-content-end align-items-center">
						<view class="album-icon">
							<image src="/static/creation/icon-album.png"></image>
						</view>
						<view class="text-292940 family-cn">{{workInfo.album.name}}</view>
						<view class="more-icon">
							<image src="/static/mine/me-more.png"></image>
						</view>
					</view>
				</view>
				<view class="input-list d-flex justify-content-between fz-28 align-items-center">
					<view class="text-292940">发行</view>
					<view class="text-292940 family-cn padding-r-8">{{workInfo.count}}</view>
				</view>
				<view class="input-list d-flex justify-content-between fz-28 align-items-center">
					<view class="text-292940">流通</view>
					<view class="d-flex justify-content-end align-items-center">
						<view class="text-292940 family-cn padding-r-8">{{workInfo.all_sell_count || 0}}</view>
					</view>
				</view>
			</view>
			<view class="input-info card-shadow">
				<view class="input-list d-flex justify-content-between fz-28 align-items-center">
					<view class="text-292940">合约地址</view>
					<view class="d-flex justify-content-end align-items-center">
						<view class="text-292940 family-cn">
							{{nft_address.substr(0,6)}}****{{nft_address.substr(-4)}}
						</view>
						<view class="right" @click="copy(nft_address)">
							<image src="/static/mine/copy-new-black.png"></image>
						</view>
					</view>
				</view>
				<view class="input-list d-flex justify-content-between fz-28 align-items-center">
					<view class="text-292940">链上标识</view>
					<view class="text-292940 family-cn">{{workInfo.token_id || ''}}</view>
				</view>
			</view>
			<view class="author-box card-shadow d-flex justify-content-between align-items-center">
				<view class="d-flex align-items-center">
					<view class="author">
						<image :src="workInfo.user.avatar || $avatar" mode="aspectFill"></image>
					</view>
					<view>
						<view class="d-flex align-items-center mb-1">
							<view class="text-343A40 fz-30 name-line-1">{{workInfo.user.nickname}}</view>
							<view class="lable fz-22 text-center">创作者</view>
						</view>
						<view class="d-flex align-items-center">
							<view class="text-999CAA fz-24">
								{{workInfo.user.address.substr(0,6)}}****{{workInfo.user.address.substr(-4)}}
							</view>
							<view class="right" @click="copy(workInfo.user.address)">
								<image src="/static/mine/copy-new.png"></image>
							</view>
						</view>
					</view>
					
				</view>
				<view class="d-flex justify-content-end align-items-center" @click="toAuthor(workInfo.user)">
					<view class="text-292940">ta的主页</view>
					<view class="more-icon">
						<image src="/static/mine/me-more.png"></image>
					</view>
				</view>
			</view>
		</view>
		<view class="btn-box d-flex justify-content-between align-items-center">
			<u-button type="text" class="w-100 text-ffffff fz-32 btn-submit btn-style save-bg" @tap="showTrue">寄售</u-button>
		</view>
		<u-popup v-model="show" mode="bottom" border-radius="32" close-icon-pos="top-right" @close="close"
			:closeable="true">
			<view class="popup-box">
				<view class="d-flex justify-content-between align-items-center tip-dox">
					<view class="text-292940 fz-36">藏品列表</view>
					<view class="d-flex justify-content-end">
						<view class="mine-bg card-shadow text-ffffff fz-30 text-center btn" @click="batchShow = true,price = ''">批量寄售</view>
						<view class="cancel-bg card-shadow text-666978 fz-30 text-center btn" @click="modalShow = true" >取消寄售</view>
					</view>
				</view>
				<view class="d-flex align-items-center justify-content-between batch-box">
					<view class="d-flex align-items-center">
						<u-checkbox-group @change="checkChange" width="40upx">
							<u-checkbox name="check" activeColor="#292940" size="36" v-model="isCheck"></u-checkbox>
						</u-checkbox-group>
						<span class="text-666978 fz-26 pl-1">是否寄售</span>
					</view>
					<view class="d-flex justify-content-right align-items-center" style="width: 460upx;">
						<u-search placeholder="搜索编号" placeholder-color="#CCCDD5" search-icon-color="#999BA8"
							:show-action="false" border-color="#D8D9E1" bg-color="#ffffff" v-model="searchKeyword" @search="search" @clear="clear"></u-search>
						<view class="filter-icon" v-show="sort == 'asc'" @click="sort = 'desc'">
							<image src="/static/market/order-pos.png"></image>
						</view>
						<view class="filter-icon" v-show="sort == 'desc'" @click="sort = 'asc'">
							<image src="/static/market/order-sel.png"></image>
						</view>
					</view>
				</view>
				<scroll-view scroll-y class="internet-h" @scrolltolower="scrolltolower" :scroll-top="scrollTop" @scroll="scroll">
					<template v-for="(item,index) in splitList">
						<view class="batch-content d-flex justify-content-between align-items-center" v-if="item.count > 1">
							<view>
								<view class="d-flex align-items-center" v-if="workInfo">
									<view class="text-292940 fz-32 font-DIN" v-if="index == 0">{{workInfo.token_id}}#{{workInfo.number + 1}}-#{{workInfo.number + item.count}}</view>
									<view class="text-292940 fz-32 font-DIN" v-else>{{workInfo.token_id}}#{{splitList[index - 1].count + 1}}-#{{item.count + splitList[index - 1].count}}</view>
									<text class="have-count">{{item.count}}</text>
								</view>
							</view>
							<view class="yellow-bg text-ffffff fz-30 text-center btn" @click="showSellLine(item,index)">寄售</view>
						</view>
						<view class="internet d-flex justify-content-between align-items-center" v-if="item.count == 1 && ((isCheck && item.status == 0) || !isCheck)">
							<view class="d-flex">
								<view class="popup-internet-left">
									<view class="text-292940 fz-32 font-DIN"> {{workInfo.token_id}}#{{item.no}}</view>
									<view class="text-999BA8  d-flex align-items-end" v-if="parseFloat(item.buy_price) !== 0">
										<span class="fz-20 ">买入价: </span>
										<span class="fz-22 bid-label-style">￥</span><span class="fz-22">{{parseFloat(item.buy_price).toFixed(2)}}</span>
									</view>
								</view>
								<view class="text-292940 font-DIN text-center d-flex align-items-center"  v-if="item.status == 0">
									<span class="fz-30" style="line-height:42upx;">￥</span><span class="fz-40">{{parseFloat(item.price).toFixed(2)}}</span>
								</view>
							</view>
							
							<view v-if="item.status == 0">
								<view class="cancel-bg card-shadow text-666978 fz-30 text-center btn" @click="userWorkSellCancel(index,item.id)">取消寄售</view>
							</view>
							<view v-else class="yellow-bg text-ffffff fz-30 text-center btn" @click="showSellOne(item,index)">寄售</view>
						</view>
					</template>
					<u-loadmore :status="status" v-show="moreShow" margin-top="50" class="pb-3" />
					<u-empty v-show="total === 0 && !moreShow" mode="data"></u-empty>
				</scroll-view>
			</view>
		</u-popup>
		<u-popup v-model="batchShow" mode="center" border-radius="16" closeable>
			<view class="album-box">
				<view class="title">
					批量寄售
				</view>
				<view class="item mb-0">
					<label class="text-36363A fz-32">寄售数量</label>
					<u-input v-model="count" :disabled="workInfo.count == 1" :focus="batchShow" :custom-style="customStyle" height="80" border="bottom"
						class="input-box" clearable label-width="0" placeholder="请输入寄售数量" type="number"
						placeholder-style="color:#CCCDD5;" :border="false" clear-size="36">
					</u-input>
				</view>
				<view class="item">
					<label class="text-36363A fz-32">寄售价格</label>
					<u-input v-model.number="price" :custom-style="customStyle" height="80" border="bottom"
						class="input-box" clearable label-width="0" placeholder="请输入寄售价格" type="number"
						placeholder-style="color:#CCCDD5;" :border="false" clear-size="36">
					</u-input>
				</view>
				<!-- <view class="d-flex align-items-center justify-content-between item pt-0 border-none mb-0">
					<view class="text-36363A fz-32">是否优先购</view>
					<u-switch v-model="isPre" activeColor="#292940"></u-switch>
				</view> -->
				<u-button class="add-btn" :loading="sellLoading" @click="userWorkSellBatch" hover-class="none">寄售</u-button>
			</view>
		</u-popup>
		
		<!-- 只寄售一个 -->
		<u-popup v-model="sellShow" mode="center" border-radius="16" closeable>
			<view class="album-box">
				<view class="title">
					寄售
				</view>
				<view class="item">
					<label class="text-36363A fz-32">寄售价格</label>
					<u-input v-model.number="price" :focus="sellShow" :custom-style="customStyle" height="80" border="bottom"
						class="input-box" clearable label-width="0" placeholder="请输入寄售价格" type="number"
						placeholder-style="color:#CCCDD5;" :border="false" clear-size="36">
					</u-input>
				</view>
				<!-- <view class="d-flex align-items-center justify-content-between item pt-0 border-none mb-0">
					<view class="text-36363A fz-32">是否优先购</view>
					<u-switch v-model="isPre" activeColor="#292940"></u-switch>
				</view> -->
				<u-button class="add-btn" :loading="sellOneLoading" @click="userWorkSell" hover-class="none">寄售</u-button>
			</view>
		</u-popup>
		<u-popup v-model="setShow" mode="center" border-radius="16" close-icon-pos="top-right" :closeable="true"
			@close="close">
			<view class="album-box">
				<view class="title">
					设置优先购
				</view>
				<view class="item position-relative mb-0">
					<label class="text-36363A fz-32">公售时间</label>
					<u-input v-model="sellTime" disabled @tap="pickerShow = true" :custom-style="customStyle" height="80" border="bottom"
						class="input-box ipt-day"  label-width="0" placeholder="请选择预售时间" type="text"
						placeholder-style="color:#CCCDD5;" :border="false" clear-size="36">
					</u-input>
					<view class="picker-label position-absolute" @tap="pickerShow = true">
						<image src="/static/home/calendar-icon.png"></image>
					</view>
				</view>
				<view class="item position-relative mb-0">
					<label class="text-36363A fz-32">提前抢购时间</label>
					<u-input v-model="leadTime" :custom-style="customStyle" height="80" border="bottom"
						class="input-box ipt-time" clearable label-width="0" placeholder="可提前几小时购买" type="number"
						placeholder-style="color:#CCCDD5;" :border="false" clear-size="36">
					</u-input>
					<label class="text-292940 fz-36 item-label position-absolute">小时</label>
				</view>
				<view class="item position-relative mb-0">
					<label class="text-36363A fz-32">限购数量</label>
					<u-input v-model="sellCount" :custom-style="customStyle" height="80" border="bottom"
						class="input-box" clearable label-width="0" placeholder="请输入限购数量" type="number"
						placeholder-style="color:#CCCDD5;" :border="false" clear-size="36">
					</u-input>
				</view>
				<view class="item position-relative">
					<label class="text-36363A fz-32">二级市场开放时间</label>
					<u-input v-model="open_market_time" disabled @tap="pickerShowOpen = true" :custom-style="customStyle" height="80" border="bottom"
						class="input-box ipt-day"  label-width="0" placeholder="请选择开放时间" type="text"
						placeholder-style="color:#CCCDD5;" :border="false" clear-size="36">
					</u-input>
					<view class="picker-label position-absolute" @tap="pickerShowOpen = true">
						<image src="/static/home/calendar-icon.png"></image>
					</view>
				</view>
				<u-button class="add-btn" hover-class="none" :loading="setLoading" @click="setPreorder">{{workInfo.buy_limit === 0 ? '设置':'修改'}}</u-button>
			</view>
		</u-popup>
		<u-modal v-model="modalShow" confirm-color="#00C0FF" show-cancel-button ref="uModal" :async-close="true" content="确定全部取消寄售吗？" @confirm="allCancelSell"></u-modal>
		<pay-keyboard :show="showKeyword" @payKeyClose="payKeyClose" @finish="finish"></pay-keyboard>
		<u-picker mode="time" v-model="pickerShow" :params="params" @confirm="pickerChange"></u-picker>
		<u-picker mode="time" v-model="pickerShowOpen" :params="params" @confirm="pickerChangeOpen"></u-picker>
		<u-modal v-model="fundShow" confirm-color="#00C0FF" show-cancel-button  content="是否前往设置资金密码？" @confirm="toFundPwd"></u-modal>
		<u-modal v-model="showOpenWallet" confirm-color="#00C0FF" show-cancel-button  content="确定前往开通钱包吗？" @confirm="toWallet"></u-modal>
	</view>
</template>

<script>
	import payKeyboard from '@/components/pay-keyboard/pay-keyboard.vue'
	export default{
		data (){
			return{
				isPre:false,//是否优先购
				showKeyword:false,
				password:'',
				modalShow:false,
				work_id:'',
				workInfo:null,
				nft_address:'',
				show:false,
				isCheck: false,
				count:1,
				price:'',
				batchShow: false,
				customStyle: {
					fontSize: '32upx'
				},
				page:1,
				total:'',
				splitList:[],
				sellLoading:false,
				moreShow:false,
				status:"loading",
				sellShow:false,
				sellOneLoading:false,
				sell_id:'',
				searchKeyword:'',
				sort:'asc',
				scrollTop: 0,
				old: {
					scrollTop: 0
				},
				sellType:'',
				nowTime:'',
				isLine:false,//判断是否是列表顶层#1~#100批量处理，以做列表刷新或者根据index刷新
				setShow:false,
				sellTime:'',//公售时间
				leadTime:'',//提前抢购时间
				sellCount:'',//限购数量
				open_market_time:'',//二级市场开放时间
				pickerShowOpen:false,
				pickerShow:false,
				params: {
					year: true,
					month: true,
					day: true,
					hour: true,
					minute: true,
					second: false
				},
				setLoading:false,
				nowTime:0,
				progress: '0', //播放进度
				innerAudioContext: '', //音乐控件上下文
				isPlaying: false, //音乐是否播放中
				AudioDuration: '', //音乐时长
				nowPlayTime: '', //音乐当前播放时间、位置
				videoShow:false,//app端是否播放视频
				fundShow:false,//提示前往设置资金密码
				showOpenWallet:false,//提示前往开通钱包
				maxWidth:''
			}
		},
		onLoad(options) {
			this.work_id = options.work_id
			this.getWorkDetail()
			this.getWorkList(1)
			uni.getSystemInfo({
				success: res => {
					this.maxWidth =  res.windowWidth
				}
			})	
		},
		onUnload() {
			this.password = ''
			this.nowTime = ''
		},
		computed:{
			USER(){
				return this.$store.state.auth.USER
			},
			//音乐总时间
			audioTime() {
				if (this.AudioDuration > 0) {
					// 转换为式分秒
					let m = parseInt(this.AudioDuration / 60 % 60)
					m = m < 10 ? '0' + m : m
					let s = parseInt(this.AudioDuration % 60)
					s = s < 10 ? '0' + s : s
					// 作为返回值返回
					return `${m}:${s}`
				}
				return '00:00'
			},
			//音乐当前播放时间
			audioPlayTime() {
				if (this.nowPlayTime > 0) {
					// 转换为时分秒
					let m = parseInt(this.nowPlayTime / 60 % 60)
					m = m < 10 ? '0' + m : m
					let s = parseInt(this.nowPlayTime % 60)
					s = s < 10 ? '0' + s : s
					// 作为返回值返回
					return `${m}:${s}`
				}
				return '00:00'
			},
			//音乐当前播放时间(倒计时计算方法)
			// audioPlayTimeCountdown() {
			// 	if (this.nowPlayTime < this.AudioDuration) {
			// 		// 转换为式分秒
			// 		let m = parseInt(Math.abs(this.nowPlayTime - this.AudioDuration)  / 60 % 60)
			// 		m = m < 10 ? '0' + m : m
			// 		let s = parseInt(Math.abs(this.nowPlayTime - this.AudioDuration) % 60)
			// 		s = s < 10 ? '0' + s : s
			// 		// 作为返回值返回
			// 		return `-${m}:${s}`
			// 	}
			// 	return '00:00'
			// },
			animationState() {
				if (this.isPlaying) {
					return 'animation-play-state:running'
				}
				return 'animation-play-state:paused'
			}
		},
		watch:{
			//强制正整数
			count(val){
				if(val !== ''){
					this.$nextTick(()=>{
						this.count = val.replace(/^(0+)|[^\d]+/g,'')
					})
				}
			},
			price(val){
				if(val !== ''){
					this.$nextTick(()=>{
						this.price = val.toString().replace(/^(0+)|[^\d]+/g,'')
					})
				}
			},
			sellCount(val){
				if(val !== ''){
					this.$nextTick(()=>{
						this.sellCount = val.replace(/^(0+)|[^\d]+/g,'')
					})
				}
			},
			leadTime(val){
				if(val !== ''){
					this.$nextTick(()=>{
						this.leadTime = val.replace(/^(0+)|[^\d]+/g,'')
						if(this.leadTime - 24 > 0){
							this.leadTime = '24'
						}
					})
				}
			},
			sort(val){
				this.getWorkList(1)
			}
		},
		//安卓实体返回判断
		onBackPress(event) {
			if(event.from == 'backbutton'){
				this.goBack()
				return true
			}
		},
		onHide() {
			if (this.workInfo.type == 2) {
				this.pauseAudio()
			}
		},
		methods:{
			//前往开通钱包
			toWallet(){
				uni.navigateTo({
					url:'/pages/secondary/mine/wallet'
				})
			},
			//预览图片
			lookImg(){
				if(uni.getSystemInfoSync().platform != 'ios'){
					uni.previewImage({
						urls: [this.workInfo.file],
						longPressActions: {
							success: function(data) {
								console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
							},
							fail: function(err) {
								console.log(err.errMsg);
							}
						}
					});
				}
			},
			goBack(){
				if (this.workInfo.type == 2) {
					this.pauseAudio()
					setTimeout(() => {
						this.innerAudioContext.destroy()
					}, 1)
				}
				let pages = getCurrentPages(); // 当前页面路由
				let beforePage = pages[pages.length - 2]; // 上一个页面路由
				if (beforePage) {
					if(beforePage.route == 'pages/secondary/mine/order-wait' || beforePage.route == 'pages/secondary/market/pay-success'){
						return uni.switchTab({
							url:'/pages/tabBars/collection'
						})
					}
					uni.navigateBack({
						delta: 1
					})
				} else {
					uni.switchTab({
						url:'/pages/tabBars/collection'
					})
				}
			},
			setPreorder(){
				if(this.sellTime == ''){
					return uni.$u.toast('请设置公售时间')
				}
				if(this.leadTime == ''){
					return uni.$u.toast('请输入提前抢购时间')
				}
				if(this.sellCount == ''){
					return uni.$u.toast('请输入限购数量')
				}
				if(this.open_market_time == ''){
					return uni.$u.toast('请设置二级市场开放时间')
				}
				let param = {
					works_id:this.work_id,
					sell_time:this.sellTime,
					preorder_hour:this.leadTime,
					buy_limit:this.sellCount,
					open_market_time:this.open_market_time
				}
				this.setLoading = true
				this.$store.dispatch('user/setPreorder',param).then(res=>{
					this.setLoading = false
					this.setShow = false
					this.getWorkDetail('setTime')
				}).catch(error=>{
					this.setLoading = false
				})
			},
			//前往设置资金密码
			toFundPwd(){
				uni.navigateTo({
					url:'/pages/setting/capital-password'
				})
			},
			showTrue(){
				if(this.USER.is_official != 1){
					if(this.USER.wallet_count == 0){
						return this.showOpenWallet = true
					}
				}
				if(!this.USER.has_second_password){
					return this.fundShow = true
				}
				this.show = true
			},
			payKeyClose(e){
				this.showKeyword = e
			},
			finish(e){
				this.password = e
				this.showKeyword = false
				if(this.sellType == 1){
					//寄售
					this.userWorkSell(1)
				}else{
					//批量寄售
					this.userWorkSellBatch(1)
				}
			},
			//用户点击搜索
			search(){
				this.goTop()
				this.getWorkList(1)
			},
			//用户点击清除
			clear(){
				this.goTop()
				this.getWorkList(1)
			},
			showSellOne(item,index){
				this.price = ''
				this.sellShow = true
				this.sell_id = item.id
				this.sell_index = index
				this.isLine = false
			},
			showSellLine(item,index){
				if(item.count > 1){
					this.batchShow = true,
					this.price = ''
				}else{
					this.price = ''
					this.sellShow = true
					this.sell_id = item.id
					this.sell_index = index
					this.isLine = true
				}
			},
			//获取作品详情
			getWorkDetail(val){
				this.$store.dispatch('user/userWorkShow',{work_id:this.work_id}).then(res=>{
					this.workInfo = res.data
					this.nft_address = res.data.nft_address
					if(this.workInfo.buy_limit !== 0){
						this.sellCount = this.workInfo.buy_limit + ''
						this.sellTime = this.workInfo.sell_time.substring(0,16)
						this.open_market_time = this.workInfo.open_market_time.substring(0,16)
					}
					if(this.workInfo.type == 2 && val != 'setTime'){
						this.createAudioContext()
					}
				})
			},
			//获取作品下标识列表
			getWorkList(val){
				if(val == 1){
					this.page = 1
					this.total = ''
					this.splitList = []
					this.goTop()
				}
				let param = {}
				if(this.isCheck){
					param = {
						status:0,
						work_id:this.work_id,
						page:this.page,
						no:this.searchKeyword,
						sort:this.sort
					}
				}else{
					param = {
						work_id:this.work_id,
						page:this.page,
						no:this.searchKeyword,
						sort:this.sort
					}
				}
				this.moreShow = true
				this.status = 'loading'
				this.$store.dispatch('user/userWorkList',param).then(res=>{
					if(this.page == 1){
						this.splitList = res.data.data
					}else{
						this.splitList = [...this.splitList,...res.data.data]
					}
					this.total = res.data.total
					if(this.splitList.length == this.total && this.splitList.length > 4){
						this.status = 'nomore'
					}else{
						this.moreShow = false
					}
				}).catch(error=>{
					this.moreShow = false
				})
			},
			//标识列表上拉加载
			scrolltolower(){
				if(!this.moreShow && this.splitList.length < this.total){
					this.page++
					this.getWorkList()
				}
			},
			//批量寄售
			userWorkSellBatch(val){
				if(this.count === ''){
					return uni.$u.toast('请输入寄售数量')
				}
				if(this.price === ''){
					return uni.$u.toast('请输入寄售价格')
				}
				this.sellType = 2
				if(this.password === ''){
					this.showKeyword = true
				}else{
					if(val !== 1){
						let nowTime = (new Date()).getTime()
						if(this.nowTime !=='' && nowTime - this.nowTime > 60000){
							this.password = ''
							this.showKeyword = true
							return false
						}
					}
					this.sellLoading = true
					let param = {
						// is_preorder:this.isPre,
						sp:this.password,
						work_id:this.work_id,
						count:this.count,
						price:this.price
					}
					this.$store.dispatch('user/userWorkSellBatch',param).then(res=>{
						this.sellLoading = false
						this.batchShow = false
						uni.$u.toast('寄售成功')
						this.getWorkDetail()
						this.getWorkList(1)
						this.nowTime = (new Date()).getTime()
					}).catch(error=>{
						this.password = ''
						this.sellLoading = false
					})
				}
				
			},
			//寄售
			userWorkSell(val){
				if(this.price === ''){
					return uni.$u.toast('请输入寄售价格')
				}
				this.sellType = 1
				if(this.password === ''){
					this.showKeyword = true
				}else{
					if(val !== 1){
						let nowTime = (new Date()).getTime()
						if(this.nowTime !=='' && nowTime - this.nowTime > 60000){
							this.password = ''
							this.showKeyword = true
							return false
						}
					}
					this.sellOneLoading = true
					let param = {
						// is_preorder:this.isPre,
						sp:this.password,
						user_work_id:this.sell_id,
						price:this.price
					}
					this.$store.dispatch('user/userWorkSell',param).then(res=>{
						this.sellOneLoading = false
						this.sellShow = false
						uni.$u.toast('寄售成功')
						if(this.isLine){
							this.getWorkDetail()
							this.getWorkList(1)
						}else{
							this.splitList[this.sell_index].status = 0
							this.splitList[this.sell_index].price = this.price
						}
						this.nowTime = (new Date()).getTime()
					}).catch(error=>{
						this.password = ''
						this.sellOneLoading = false
					})
				}
			},
			//取消寄售
			userWorkSellCancel(index,user_work_id){
				this.$store.dispatch('user/userWorkSellCancel',{work_id:this.work_id,user_work_id:user_work_id}).then(res=>{
					// this.splitList[index].status = 1
					this.getWorkList(1)
				})
			},
			//全部取消寄售
			allCancelSell(){
				this.$store.dispatch('user/userWorkSellCancel',{work_id:this.work_id}).then(res=>{
					this.$refs.uModal.clearLoading();
					this.modalShow = false
					this.getWorkList(1)
				}).catch(error=>{
					this.$refs.uModal.clearLoading();
				})
			},
			//复制钱包地址
			copy(val) {
				uni.setClipboardData({
					data: val,
					success: (data)=> {
						uni.showToast({
							title: '复制成功'
						})
					}
				})
			},
			close() {
			
			},
			//前往专辑
			toAlbum(){
				uni.navigateTo({
					url:`/pages/secondary/creation/album?name=${this.workInfo.album.name}&id=${this.workInfo.album.id}&user_id=${this.workInfo.album.user_id}`
				})
			},
			//前往作者
			toAuthor(item){
				uni.navigateTo({
					url:`/pages/secondary/market/author?userInfo=${JSON.stringify(item)}`
				})
			},
			checkChange(e) {
				this.$nextTick(()=>{
					this.getWorkList(1)
				})
			},
			scroll(e) {
				this.old.scrollTop = e.detail.scrollTop
			},
			goTop(e) {
				// 解决view层不同步的问题
				this.scrollTop = this.old.scrollTop
				this.$nextTick(function() {
					this.scrollTop = 0
				})
			},
			pickerChange(e) {
				this.sellTime = e.year + '-'+ e.month + '-' + e.day + ' ' + e.hour + ':' + e.minute
			},
			pickerChangeOpen(e){
				this.open_market_time = e.year + '-'+ e.month + '-' + e.day + ' ' + e.hour + ':' + e.minute
			},
			//播放音乐
			palyAudio() {
				this.innerAudioContext.play()
				this.isPlaying = true
			},
			//暂停音乐
			pauseAudio() {
				this.innerAudioContext.pause()
				this.isPlaying = false
			},
			//停止音乐
			stopAudio() {
				this.innerAudioContext.stop()
				this.isPlaying = false
			},
			//创建音频上下文
			createAudioContext() {
				this.innerAudioContext = uni.createInnerAudioContext();
				this.innerAudioContext.src = this.workInfo.file
				this.innerAudioContext.onCanplay((e) => {
					this.AudioDuration = Math.floor(this.innerAudioContext.duration)
					this.nowPlayTime = 0
				});
			
				//监听音乐播放
				this.innerAudioContext.onPlay(() => {
					this.isPlaying = true
					console.log('音乐开始播放了');
				});
				//监听音乐暂停
				this.innerAudioContext.onPause(() => {
					this.isPlaying = false
					console.log('音乐暂停了');
				});
				//监听音乐停止
				this.innerAudioContext.onStop(() => {
					this.isPlaying = false
					console.log('音乐停止了');
				});
				//监听音乐自然播放结束
				this.innerAudioContext.onEnded(() => {
					this.nowPlayTime = this.AudioDuration
					this.progress = 100
					this.isPlaying = false
				});
				//监听音乐播放进度更新事件
				this.innerAudioContext.onTimeUpdate(() => {
					this.nowPlayTime = Math.floor(this.innerAudioContext.currentTime)
					this.progress = parseFloat((this.nowPlayTime / this.AudioDuration) * 100)
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container{
		width: 100%;
		min-height: 100vh;
		background: #F8F9FB;
	}
	.audio-box{
		/* #ifdef APP-PLUS */
		width: 750upx;
		height: 750upx;
		/* #endif */
		/* #ifdef H5 */
		width: var(--percent);
		height: var(--percent);
		/* #endif */
		overflow: hidden;
		background-size: cover !important;
		.backdrop-box{
			width: 100%;
			height: 100%;
			display: flex;
			justify-content: center;
			backdrop-filter: blur(20px) !important;
			position: relative;
			.audio-bg{
				width: 750upx;
				height: 750upx;
				background: url('/static/creation/audio-bg.png') no-repeat;
				background-size: 100% 100%;
				display: flex;
				justify-content: center;
				align-items: center;
				animation: rotate360 30s 0s linear infinite;
				.audio-pic{
					width: 400upx;
					height: 400upx;
					border-radius: 50%;
				}
			}
			@keyframes rotate360 {
				from{
					transform: rotate(0deg);
				}
				to{
					transform: rotate(360deg);
				}
			}
			.audio-img {
				width: 80upx !important;
				height: 80upx !important;
				position: absolute !important;
				left: 50% !important;
				transform: translateX(-50%) !important;
				z-index: 99 !important;
				top: 335upx !important;
			}
			.play-icon {
				width: 100upx;
				height: 260upx;
				background-image: url(/static/creation/audio-icon.png);
				background-repeat: no-repeat;
				background-size: 100% 100%;
				position: absolute;
				top: 0upx;
				right: 30upx;
				z-index: 90;
				transform-Origin: top;
				transition: 1s;
			}
			
			.isRotate {
				transform-Origin: top;
				transition: 1s;
				transform: rotate(38deg);
			}
			.progress-box {
				box-sizing: border-box;
				height: 80upx;
				position: absolute;
				bottom: 20upx;
				left: 50%;
				transform: translateX(-50%);
				background-color: rgba(255, 255, 255, 0.2);
				border-radius: 40upx;
				width: 90%;
				padding: 0 35upx;
				.progress-time {
					color: #333447;
				}
				
				.progress-wrap {
					width: 475upx;
					width: 420upx;
					height: 8upx;
					// background: #666978;
					background: #999BA8;
					border-radius: 6upx;
				}
				
				.progress-left {
					height: 8upx;
					background: #292940;
					border-radius: 6upx;
					transition: 0.3s;
				}
				
				.progress-l {
					width: 8upx;
					height: 16upx;
					background: #FFFFFF;
					box-shadow: 0px 0px 6upx 0px #ADB5BD;
					border-radius: 4upx;
					top: -4upx;
					transition: 0.1s;
					/* #ifdef APP-PLUS */
						top: -6upx;
					/* #endif */
				}
			}
		}
	}
	.video-box{
		/* #ifdef APP-PLUS */
		width: 750upx;
		height: 750upx;
		/* #endif */
		/* #ifdef H5 */
		width: var(--percent);
		height: var(--percent);
		/* #endif */
		.myPic {
			width: 100%;
			height: 100%;
			background-size: cover !important;
			background-position: center center !important;
			position: relative;
		
			.maskPic {
				display: flex;
				align-items: center;
				justify-content: center;
				position: absolute;
				width: 100%;
				height: 100%;
				left: 0;
				top: 0;
				background-image: radial-gradient(circle, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.4));
		
				image {
					width: 80upx;
					height: 80upx;
				}
			}
		}
		.closeVideo {
			width: 60upx !important;
			height: 60upx !important;
			position: fixed;
			bottom: 200upx;
			left: 50%;
			transform: translateX(-50%);
		}
		.myVideo {
			/* #ifdef APP-PLUS */
			width: 750upx;
			height: 750upx;
			position: fixed;
			top: 50%;
			transform: translateY(-60%);
			/* #endif */
			/* #ifdef H5 */
			width: var(--percent);
			height: var(--percent);
			/* #endif */
		}
	}
	.blind-img {
		width: 580upx;
		border-radius: 24upx;
		background: linear-gradient(180deg, #BAB5BA , #3B394A);
		margin: 0 auto;
		margin-top: 42upx;
		transform-style: preserve-3d;
		position: relative;
		animation: run 24s linear infinite;
		padding: 10upx;
		box-sizing: border-box;
		font-size: 0px;
		image {
			width: 100%;
			border-radius: 18upx;
			backface-visibility: hidden;
		}
	
		.back-img {
			position: absolute;
			backface-visibility: hidden;
			left: 10upx;
			top: 10upx;
			bottom: 10upx;
			right: 10upx;
			width: calc(100% - 20upx) !important;
			height: calc(100% - 20upx) !important;
			border-radius: 18upx;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			transform: rotateY(180deg);
			background: linear-gradient(180deg, #142348 , #141946);
			.bg-image{
				width: 40%;
				margin-bottom: 5%;
			}
			.title{
				display: block;
				width: 100%;
				color: #989fb4;
				font-size: 30upx;
				font-weight: 600;
				text-align: center;
			}
		}
	}
	
	@keyframes run {
		from {
			transform: rotateY(0deg);
		}
	
		to {
			transform: rotateY(360deg);
		}
	}
	
	.base {
		width: 100%;
		height: 210upx;
		background: url('/static/market/base-img.png') no-repeat;
		background-size: 100% 100%;
		margin-top: -30upx;
	}
	.content{
		width: 100%;
		padding: 0upx 24upx 146upx 24upx;
		box-sizing: border-box;
		// background: #F8F9FB;
		margin-top: -40upx;
	}
	.input-info {
		width: 100%;
		padding: 0 30upx;
		border-radius: 16upx;
		margin-bottom: 20upx;
		background: #FFFFFF;
		border-radius: 10upx;
		.input-list {
			height: 98upx;
			border-bottom: 1upx solid #E9ECEF;
			.album-icon{
				width: 28upx;
				height: 28upx;
				margin-right: 8upx;
				image{
					width: 28upx;
					height: 28upx;
				}
			}
			.more-icon{
				width: 28upx;
				height: 28upx;
				margin-left: 10upx;
				image{
					width: 28upx;
					height: 28upx;
				}
			}
			.right {
				width: 32upx;
				height: 32upx;
				margin-left: 14upx;
	
				image {
					width: 32upx;
					height: 32upx;
					vertical-align: top;
				}
			}
		}
	
		.input-list:last-of-type {
			padding-bottom: 0;
			border-bottom: none;
		}
	}
		
	.brief-box{
		width: 100%;
		background: #FFFFFF;
		border-radius: 10px;
		padding:34upx 27upx;
		margin-bottom: 20upx;
		box-sizing: border-box;
		.me-icon{
			width: 36upx;
			height: 36upx;
			margin-right: 10upx;
		
		}
		.lable{
			display: inline-block;
			height: 40upx;
			line-height: 36upx;
			background: rgba(30, 247, 254, .1);
			border-radius: 20upx 20upx 2upx 20upx;
			color:#00C0FF;
			padding: 0 20upx;
			margin:22upx 20upx 22upx 0;
			image{
				width: 26upx;
				height: 26upx;
				margin-right: 10upx;
			}
		}
		.my-count{
			margin-bottom: 2upx;
		}
		
	}
	.author-box{
		width: 100%;
		height: 170upx;
		background: #FFFFFF;
		border-radius: 10upx;
		padding: 36upx 28upx;
		box-sizing: border-box;
		.author{
			width: 98upx;
			height: 98upx;
			margin-right: 24upx;
			image{
				width: 98upx;
				height: 98upx;
				border-radius: 50%;
			}
		}
		.more-icon{
			width: 28upx;
			height: 28upx;
			margin-left: 10upx;
			image{
				width: 28upx;
				height: 28upx;
			}
		}
		.lable{
			width: 90upx;
			height: 36upx;
			line-height: 30upx;
			border-radius: 4upx 20upx 4upx 20upx;
			margin-left: 10upx;
			color:#00C0FF;
			border: 1upx solid rgba(0, 192, 255, 0.25);
		}
		.right {
			width: 32upx;
			height: 32upx;
			margin-left: 14upx;
			
			image {
				width: 32upx;
				height: 32upx;
				vertical-align: top;
			}
		}
	}
	.btn-box{
		width: 100%;
		position: fixed;
		// padding: 14upx 20upx;
		padding: 14upx 30upx;
		box-sizing: border-box;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
		background: #FFFFFF;
		.delete-box {
			width: 70upx;
			margin-right: 6upx;
			
			.delete-icon {
				width: 35upx;
				height: 35upx;
				margin: 0 auto;
				margin-bottom: 12upx;
			
				image {
					width: 35upx;
					height: 35upx;
					vertical-align: top;
				}
			}
		}
		.btn-style {
			width: 593upx;
			height: 98upx;
			background: #292940;
			border-radius: 49upx;
			
			
		}
		.save-bg {
			background: #292940;
			}
			
	}
	/deep/.u-close--top-right{
		top:18upx;
	}
	/deep/.u-checkbox__icon-wrap{
		background: #F8F9FB;
	}
	.popup-box {
		width: 100%;
		background: #ffffff;
		padding: 66upx 0 0;
		box-sizing: border-box;
		.batch-box{
			padding: 26upx 16upx 20upx 30upx;
			box-sizing: border-box;
		}
		.tip-dox{
			height: 76upx;
			padding: 0 30upx;
			box-sizing: border-box;
		}
	
		.filter-icon {
			width: 44upx;
			height: 44upx;
			margin-left: 20upx;
			image {
				width: 44upx;
				height: 44upx;
			}
		}
		.popup-title {
			padding-bottom: 21upx;
		}
		.batch-content{
			width: 100%;
			padding: 0 30upx;
			box-sizing: border-box;
			height: 120upx;
			border-bottom: 1upx solid rgba(216, 222, 228, .6);
			.have-count{
				min-width: 30upx;
				height: 30upx;
				line-height: 30upx;
				background: #F5222D;
				text-align: center;
				border-radius: 15upx;
				color: #ffffff;
				font-size: 18upx;
				padding: 0 6upx;
				margin-left: 6upx;
			}
		}
		.internet-h{
			// min-height: 390upx;
			// max-height: 714upx;
			height: 720upx;
			overflow-y: auto;
		}
		.internet {
			width: 100%;
			padding: 0 30upx;
			box-sizing: border-box;
			height: 120upx;
			border-bottom: 1upx solid rgba(216, 222, 228, .6);
		}
		.internet:nth-last-of-type(1){
			border-bottom: none;
			margin-bottom: 20upx;
		}
		.btn{
			width: 158upx;
			height: 56upx;
			line-height: 56upx;
			border-radius: 44upx;
		}
		.pt{
			margin-top: 6upx;
		}
	}
	.album-box {
		width: 640upx;
		background: #FFFFFF;
		padding: 50upx 45upx 60upx 45upx;
		.title {
			color: #292940;
			font-size: 36upx;
			text-align: center;
			font-weight: 500;
		}
	
		.item {
			width: 100%;
			height: 182upx;
			box-sizing: border-box;
			padding-top: 50upx;
			border-bottom: 1upx solid #D8DEE4;
			position: relative;
			margin-bottom: 60upx;
			color: #292940;
			font-size: 36upx;
			.item-label{
				right:2upx;
				top:126upx;
			}
			.picker-label{
				right:2upx;
				top:130upx;
				width: 40upx;
				height: 40upx;
				image{
					width: 40upx;
					height: 40upx;
					vertical-align: top;
				}
			
			}
			.input-box {
				width: 100%;
				margin-top: 10upx !important;
				font-size: 40upx !important;
			}
			.ipt-time{
				padding-right:120upx !important;
			}
		}
		.border-none{
			border-bottom: none;
		}
		.add-btn {
			width: 544upx;
			height: 98upx;
			background: #292940 !important;
			border-radius: 49upx;
			color: #FFFFFF;
			font-size: 36upx;
			text-align: center;
		}
	
	}
	.popup-internet-left{
		width: 266upx;
	}
	.bid-label-style{
		line-height: 28upx;
		display: inline-block;
	}
	.padding-r-8{
		padding-right: 8upx;
	}
</style>